<template>
    <div>
        <div id="chart" style="width: 400px; height: 350px; margin-left: 70px; margin-top: -40px;">
            <div id="chartContent" style="width: 100%; height: 100%"></div>
        </div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import { listDevice } from "../../api/system/device";

export default {
    mounted() {
        this.getData();
    },
    data() {
        return {
            Danger: [],
            normal: [],
            offline: [],
        };
    },

    methods: {
        async getData() {
  try {
    const data = await listDevice({ status: "3" });
    this.stateList(data.rows);
  } catch (error) {
    console.log(error,'大饼图出错')
  }
},

stateList(e) {
  let offlineCount = 0;
  let normalCount = 0;
  let dangerCount = 0;

  e.forEach((item) => {
    const statusLabel = item.statusLable;
    if (statusLabel === "离线") {
      offlineCount++;
    } else if (statusLabel === "在线") {
      normalCount++;
    }
  });
  

  // 在这里生成饼图
    (offlineCount,normalCount)
  this.generatePieChart(offlineCount, normalCount, dangerCount);
},

generatePieChart(offlineCount, normalCount, dangerCount) {
  let chart = echarts.init(document.getElementById("chartContent"));

  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      textStyle: {
        fontFamily: "Noto Sans SC",
      },
    },
    legend: {
      top: "10%",
      left: "center",
      data: ["离线", "在线"],
    },
    series: [
      {
        name: "设备状态",
        type: "pie",
        radius: "50%",
        center: ["50%", "50%"],
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          padding: [0, 10, 0, 10],
        },
        data: [
        { value: offlineCount, name: "离线", itemStyle: { color: "#999" } }, // 离线状态的颜色为灰色
          { value: normalCount, name: "在线", itemStyle: { color: "lightgreen" } }, // 正常状态的颜色为青绿色
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  chart.setOption(option);
},
    },
};
</script>
  
<style></style>
  